<template>
  <div class="app-container home">
    <el-row :gutter="15" class="home-card-one mb15">
      <el-col
        :xs="24"
        :sm="12"
        :md="12"
        :lg="6"
        :xl="6"
        v-for="(v, k) in state.homeOne"
        :key="k"
        :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }"
      >
        <div class="home-card-item flex">
          <div class="flex-margin flex w100" :class="` home-one-animation${k}`">
            <div class="flex-auto">
              <span class="font30">{{ v.num1 }}</span>
              <span class="ml5 font16" :style="{ color: v.color1 }"
                >{{ v.num2 }}%</span
              >
              <div class="mt10">{{ v.num3 }}</div>
            </div>
            <div
              class="home-card-item-icon flex"
              :style="{ background: v.color2 }"
            >
              <!-- <i
                class="flex-margin font32"
                :class="v.num4"
                :style="{ color: v.color3 }"
              ></i> -->
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-divider />
  </div>
</template>

<script setup name="Index">
import {
  reactive,
  onMounted,
  ref,
  watch,
  nextTick,
  onActivated,
  markRaw,
} from "vue";
import * as echarts from "echarts";

// 定义变量内容
const homeLineRef = ref();
const homePieRef = ref();
const homeBarRef = ref();

const version = ref("3.8.4");

const state = reactive({
  global: {
    homeChartOne: null,
    homeChartTwo: null,
    homeCharThree: null,
    dispose: [null, "", undefined],
  },
  homeOne: [
    {
      num1: "125,12",
      num2: "-12.32",
      num3: "订单统计信息",
      num4: "fa fa-meetup",
      color1: "#FF6462",
      color2: "#ecf5ff",
      color3: "#F74023",
    },
    {
      num1: "653,33",
      num2: "+42.32",
      num3: "月度计划信息",
      num4: "iconfont icon-ditu",
      color1: "#6690F9",
      color2: "#f0f9eb",
      color3: "#67c23a",
    },
    {
      num1: "125,65",
      num2: "+17.32",
      num3: "年度计划信息",
      num4: "iconfont icon-zaosheng",
      color1: "#6690F9",
      color2: "#fdf6ec",
      color3: "#e6a23c",
    },
    {
      num1: "520,43",
      num2: "-10.01",
      num3: "访问统计信息",
      num4: "fa fa-github-alt",
      color1: "#FF6462",
      color2: "#fef0f0",
      color3: "#f56c6c",
    },
  ],
  homeThree: [
    {
      icon: "iconfont icon-yangan",
      label: "浅粉红",
      value: "2.1%OBS/M",
      iconColor: "#F72B3F",
    },
    {
      icon: "iconfont icon-wendu",
      label: "深红(猩红)",
      value: "30℃",
      iconColor: "#91BFF8",
    },
    {
      icon: "iconfont icon-shidu",
      label: "淡紫红",
      value: "57%RH",
      iconColor: "#88D565",
    },
    {
      icon: "iconfont icon-shidu",
      label: "弱紫罗兰红",
      value: "107w",
      iconColor: "#88D565",
    },
    {
      icon: "iconfont icon-zaosheng",
      label: "中紫罗兰红",
      value: "57DB",
      iconColor: "#FBD4A0",
    },
    {
      icon: "iconfont icon-zaosheng",
      label: "紫罗兰",
      value: "57PV",
      iconColor: "#FBD4A0",
    },
    {
      icon: "iconfont icon-zaosheng",
      label: "暗紫罗兰",
      value: "517Cpd",
      iconColor: "#FBD4A0",
    },
    {
      icon: "iconfont icon-zaosheng",
      label: "幽灵白",
      value: "12kg",
      iconColor: "#FBD4A0",
    },
    {
      icon: "iconfont icon-zaosheng",
      label: "海军蓝",
      value: "64fm",
      iconColor: "#FBD4A0",
    },
  ],
  myCharts: [],
  charts: {
    theme: "",
    bgColor: "",
    color: "#303133",
  },
});

function goTarget(url) {
  window.open(url, "__blank");
}
</script>

<style scoped lang="scss">
.home {
  background-color: #f5f5f5;

  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }
}

.home-card-item {
  width: 100%;
  height: 130px;
  border-radius: 4px;
  transition: all ease 0.3s;
  padding: 20px;
  overflow: hidden;
  background: #fff;
  color: #dadada;
  border: 1px solid #f1f2f3;
  &:hover {
    box-shadow: 0 2px 12px #0000001a;
    transition: all ease 0.3s;
  }
  &-icon {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    flex-shrink: 1;
    i {
      color: #7a7a7a;
    }
  }
  &-title {
    font-size: 15px;
    font-weight: bold;
    height: 30px;
  }
}

.home-card-one {
  @for $i from 0 through 3 {
    .home-one-animation#{$i} {
      opacity: 0;
      animation-name: error-num;
      animation-duration: 0.5s;
      animation-fill-mode: forwards;
      animation-delay: calc($i/4) + s;
    }
  }
}

.font30 {
  color: #333;
}
</style>
